<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>豆瓣热门电影</title>
    <script src="./js/jquery-1.12.3.min.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/jquery.bootgrid.min.css">
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/jquery.bootgrid.min.js"></script>
    <script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css" type="text/css"></link>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <nav class="navbar navbar-inverse">
                <div class="container-fluid">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">Mysql douban database</a>
                    </div>
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <!--<li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">单表查询<span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="showactor">actor</a></li>
                                </ul>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">跨表查询<span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="country_city">country和city</a></li>
                                    <li><a href="chinacity">查询中国的city</a></li>
                                    <li><a href="india">查询印度的city</a></li>
                                </ul>
                            </li>-->
                            <li><a href="fileupload">fileupload</a></li>
                            <li><a href="logout">logout</a></li>
                        </ul>
                    </div><!-- /.navbar-collapse -->
                </div><!-- /.container-fluid -->
            </nav>
        </div>
    </div>
    <ol class="breadcrumb">

        <li class="active">热门电影</li>
    </ol>
    <div class="row">
        <div class="col-md-12">
            <h2 id="h2title">豆瓣热门电影查询</h2>
            <a href="exportfilms"  class="btn btn-primary" >导出为EXCEL</a>
            <button class="btn btn-primary" id="btnAdd"><span class="glyphicon glyphicon-zoom-in"></span>新增</button>
            <!--<div  class="btn-group">
                <button type="button" class="btn btn-primary "data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    查看接口数据<span class="caret"></span>
                </button>

                <ul class="dropdown-menu">
                    <li><a href="/zmhssm/listFilmsXml?current=1&rowCount=10" target="_blank">XML</a></li>
                    <li><a href="/zmhssm/films?current=1&rowCount=10" target="_blank">JSON</a></li>
                </ul>
            </div>-->


            <!--根据condition keyword 查询电影的表单-->
            <div class="form-inline">
                <select class="form-control" id="select-condition">
                    <option value="name">片名</option>
                    <option value="year">年份</option>
                    <option value="directors">导演</option>
                    <option value="actors">主演</option>
                    <option value="tags">类别</option>
                    <option value="languages">语言</option>
                    <option value="releaseDates">上映时间</option>
                    <option value="star">评分</option>
                </select>
                <input id="keyword" type="text" class="form-control" placeholder="关键字">
                <button id="btn_search" type="button" class="btn btn-success">搜索</button>
            </div>

            <!--显示电影基本信息的表格-->
            <table id="grid-data" class="table table-condensed table-hover table-striped">
                <thead>
                <tr>
                    <th data-column-id="year"  data-identifier="true" data-type="numeric">年份</th>
                    <th data-column-id="name">片名</th>
                    <th data-column-id="directors">导演</th>
                    <!--<th data-column-id="writers">编    剧</th>-->
                    <th data-column-id="actors">主演</th>
                    <th data-column-id="tags">类别</th>
                    <!-- <th data-column-id="areas">制片国家</th>-->
                    <th data-column-id="languages">语言</th>
                    <th data-column-id="releaseDates">上映时间</th>
                    <!--<th data-column-id="duration">时长</th>-->
                    <!--<th data-column-id="otherName">别名</th>-->
                    <!--<th data-column-id="imdbUrl">IMBD</th>-->
                    <th data-column-id="star">评分</th>
                    <!--<th data-column-id="evaluateNum">评论数</th>
                    <th data-column-id="url">豆瓣链接</th>-->
                    <th data-column-id="commands" data-formatter="commands" data-sortable="false">修改</th>
                </tr>
                </thead>
            </table>

            <!--显示电影影评信息的表格-->
            <table id="grid-detail-mdata" class="table table-condensed table-hover table-striped">
                <thead>
                <tr>
                    <th data-column-id="filmname"  data-identifier="true" data-type="numeric">电影名称</th>
                    <th data-column-id="username">用户</th>
                    <th data-column-id="context">影评内容</th>
                    <th data-column-id="likenum">获赞数量</th>
                    <th data-column-id="commands" data-formatter="commands" data-sortable="false">修改</th>
                </tr>
                </thead>
            </table>

        </div>
    </div>
</div>


<!--影评详情模态框-->
<div class="modal fade" tabindex="-1" role="dialog" id="dlg_filmcontext">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">影评内容</h4>
            </div>
            <script>

                $(function () { $("[data-toggle='tooltip']").tooltip(); });

            </script>
            <div class="modal-body">
                <label for="film_context" id="label_film_context">评论用户</label>
                <button class="btn btn-primary btn-xs" id="btn-filmcontext-like"  data-toggle="tooltip" data-placement="right" title="为该评论者点赞">
                    <span class="glyphicon glyphicon-thumbs-up"></span>赞同
                </button>
                <textarea  id="film_context" class="form-control" rows="20" style="resize:none" readonly >评论内容</textarea>
                <input type="text" id="text_film_context_id" hidden>
            </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<!--编辑电影的基本信息模态框-->
<!--影评详情模态框-->
<div class="modal fade" tabindex="-1" role="dialog" id="dlg_film-edit">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">影评内容</h4>
            </div>

            <div class="modal-body">
                <div hidden>
                    <input type="text" id="id-edit" hidden>
                </div>
            <div class="form-group">
                <label for="year-edit">年份</label>
                <input type="text" name="year-edit" class="form-control" id="year-edit" placeholder="请输入电影年份">
            </div>
            <div class="form-group">
                <label for="name-edit">片名</label>
                <input type="text" name="name-edit" class="form-control" id="name-edit" placeholder="请输入电影名称">
            </div>
            <div class="form-group">
                <label for="directors-edit">导演</label>
                <input type="text" name="directors-edit" class="form-control" id="directors-edit" placeholder="请输入电影导演">
            </div>
            <div class="form-group">
                <label for="writers-edit">编剧</label>
                <input type="text" name="writers-edit" class="form-control" id="writers-edit" placeholder="请输入电影编剧">
            </div>
            <div class="form-group">
                <label for="actors-edit">主演</label>
                <input type="text" name="actors-edit" class="form-control" id="actors-edit" placeholder="请输入主演">
            </div>
            <div class="form-group">
                <label for="tags-edit">类别</label>
                <input type="text" name="tags-edit" class="form-control" id="tags-edit" placeholder="请输入电影类别">
            </div>
            <div class="form-group">
                <label for="areas-edit">制片国家</label>
                <input type="text" name="areas-edit" class="form-control" id="areas-edit" placeholder="请输入制片国家">
            </div>
            <div class="form-group">
                <label for="languages-edit">语言</label>
                <input type="text" name="languages-edit" class="form-control" id="languages-edit" placeholder="请输入电影语言">
            </div>
            <div class="form-group">
                <label for="releaseDates-edit">上映时间</label>
                <input type="text" name="releaseDates-edit" class="form-control" id="releaseDates-edit" placeholder="请输入电影上映时间">
            </div>
            <div class="form-group">
                <label for="duration-edit">时长</label>
                <input type="text" name="duration-edit" class="form-control" id="duration-edit" placeholder="请输入电影时长">
            </div>
            <div class="form-group">
                <label for="otherNames-edit">别名</label>
                <input type="text" name="otherNames-edit" class="form-control" id="otherNames-edit" placeholder="请输入电影别名">
            </div>
            <div class="form-group">
                <label for="imdbUrl-edit">IMDB</label>
                <input type="text" name="imdbUrl-edit" class="form-control" id="imdbUrl-edit" placeholder="请输入电影IMBD链接">
            </div>
            <div class="form-group">
                <label for="star-edit">评分</label>
                <input type="text" name="star-edit" class="form-control" id="star-edit" placeholder="请输入电影评分">
            </div>
            <div class="form-group">
                <label for="evaluateNum-edit">评论数</label>
                <input type="text" name="evaluateNum-edit" class="form-control" id="evaluateNum-edit" placeholder="请输入电影评论数">
            </div>
            <div class="form-group">
                <label for="url-edit">豆瓣链接</label>
                <input type="text" name="url-edit" class="form-control" id="url-edit" placeholder="请输入电影的豆瓣链接">
            </div>

        </div>
        <div class="modal-footer"><!--编辑模态框-->
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" id="update">Save changes</button>
        </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->



<script>

    $(function () { $("[data-toggle='tooltip']").tooltip(); });

</script>





<!--添加电影后出现的模态框-->
<div class="modal fade" tabindex="-1" role="dialog" id="dlgForm">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">添加电影</h4>
            </div>
            <div class="modal-body">
                <!-- 网页具备文件上传的3个条件：
                    1. post 提交
                    2. 具备file组件
                    3. 设置表单的enctype="multipart/form-data" , 默认表单的enctype是 x-www-urlencoding
                 -->
                <!--
                    前后端数据绑定要求所有表单项name与后台实体bean的属性名相同
                -->
                <form  method="post" id="addfimlform" >
                    <div class="form-group">
                        <label for="year">年份</label>
                        <input type="text" name="year" class="form-control" id="year" placeholder="请输入电影年份">
                    </div>
                    <div class="form-group">
                        <label for="name">片名</label>
                        <input type="text" name="name" class="form-control" id="name" placeholder="请输入电影名称">
                    </div>
                    <div class="form-group">
                        <label for="directors">导演</label>
                        <input type="text" name="directors" class="form-control" id="directors" placeholder="请输入电影名称">
                    </div>
                    <div class="form-group">
                        <label for="writers">编剧</label>
                        <input type="text" name="writers" class="form-control" id="writers" placeholder="请输入电影年份">
                    </div>
                    <div class="form-group">
                        <label for="actors">主演</label>
                        <input type="text" name="actors" class="form-control" id="actors" placeholder="请输入主演">
                    </div>
                    <div class="form-group">
                        <label for="tags">类别</label>
                        <input type="text" name="tags" class="form-control" id="tags" placeholder="请输入电影名称">
                    </div>
                    <div class="form-group">
                        <label for="areas">制片国家</label>
                        <input type="text" name="areas" class="form-control" id="areas" placeholder="请输入电影名称">
                    </div>
                    <div class="form-group">
                        <label for="languages">语言</label>
                        <input type="text" name="languages" class="form-control" id="languages" placeholder="请输入电影年份">
                    </div>
                    <div class="form-group">
                        <label for="releaseDates">上映时间</label>
                        <input type="text" name="releaseDates" class="form-control" id="releaseDates" placeholder="请输入电影名称">
                    </div>
                    <div class="form-group">
                        <label for="duration">时长</label>
                        <input type="text" name="duration" class="form-control" id="duration" placeholder="请输入电影名称">
                    </div>
                    <div class="form-group">
                        <label for="otherNames">别名</label>
                        <input type="text" name="otherNames" class="form-control" id="otherNames" placeholder="请输入电影年份">
                    </div>
                    <div class="form-group">
                        <label for="imdbUrl">IMDB</label>
                        <input type="text" name="imdbUrl" class="form-control" id="imdbUrl" placeholder="请输入电影名称">
                    </div>
                    <div class="form-group">
                        <label for="star">评分</label>
                        <input type="text" name="star" class="form-control" id="star" placeholder="请输入电影名称">
                    </div>
                    <div class="form-group">
                        <label for="evaluateNum">评论数</label>
                        <input type="text" name="evaluateNum" class="form-control" id="evaluateNum" placeholder="请输入电影年份">
                    </div>
                    <div class="form-group">
                        <label for="url">豆瓣链接</label>
                        <input type="text" name="url" class="form-control" id="url" placeholder="请输入电影名称">
                    </div>


                    <div class="form-group" style="text-align: center;">
                        <button id="addfilm" class="btn btn-primary">保存</button>
                    </div>
                </form>
            </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<script>

    $(document).ready(grid2("#grid-data","getfilms"));
    /*bootstrap初始化函数
    *whitchgrid ：表示那个#grid-data要执行  ，
    *url： 必选想 表示需要请求 返回数据的路径
    *condition : 可选项 搜索电影的时候 根据什么类型查询 如：电影名称，电影类型，电影的评分等等。
    *keyword: 可选项   搜索电影的时候 传入的参数*/
    var gridstr;/*保存电影的id*/
    function grid2( whitchgrid,url,condition,keyword,id){

        //想要多次调用bootgrid方法  需要先销毁之前生成的  本来想要用参数动态销毁的 但是不行
        $("#grid-detail-mdata").bootgrid("destroy");//销毁bootgrid方法
        $("#grid-data").bootgrid("destroy");


        if (whitchgrid=="#grid-data"){      /*如果当前使用的是#grid-data(电影基本信息表格)，就讲#grid-detail-mdata(电影影评的基本表格隐藏)*/
            $("#grid-data").show();
            $("#grid-detail-mdata").hide();
        }if(whitchgrid=="#grid-detail-mdata"){
            $("#grid-detail-mdata").show();
            $("#grid-data").hide();
        }

        /*//想要多次调用bootgrid方法  需要先销毁之前生成的  本来想要用参数动态销毁的 但是不行
        $("#grid-detail-mdata").bootgrid("destroy");//销毁bootgrid方法
        $("#grid-data").bootgrid("destroy");*/
        var grid =$(whitchgrid).bootgrid({//bootgrid方法初始化
            ajax:true,
            url:url,/*url通过参数传入*/
            post:{"condition":condition,"keyword":keyword,"id":id},//需要发送的参数通过参数传入
            ajaxSettings: {
                method: "GET",
            },
            navigation:2,

            formatters: {//格式化
                "commands": function(column, row)
                {//返回编辑按钮
                    if(whitchgrid=="#grid-data"){

                            return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.id + "\">编辑<span class=\"glyphicon glyphicon-pencil\"></span></button> " +
                                "<button type=\"button\" class=\"btn btn-xs btn-default command-delete\" data-row-id=\"" + row.id + "\">删除<span class=\"fa fa-trash-o\"></span></button>" +
                                "<button type=\"button\" class=\"btn btn-xs btn-default command-detail\" data-row-id=\"" + row.id + "\">查看影评<span class=\"fa fa-trash-o\"></span></button>";

                        };
                    if(whitchgrid=="#grid-detail-mdata"){

                        return "<button  id='btn_film_context' type=\"button\" class=\"btn btn-xs btn-default command-context-detail\" data-row-id=\"" + row.id + "\">详情<span class=\"glyphicon glyphicon-pencil\"></span></button> "+
                            "<button type=\"button\" class=\"btn btn-xs btn-default command-deletecontext\" data-row-id=\"" + row.id + "\">删除<span class=\"fa fa-trash-o\"></span></button>";

                    };/*====END if*/
                }
            }

        }).on("loaded.rs.jquery.bootgrid", function()//加载完毕的时候
        {
            /*点击 编辑 或 删除 图标  执行以下操作*/
            /* Executes after data is loaded and rendered */
            grid.find(".command-edit").on("click", function(e)
            {

                    $("#dlg_film-edit").modal();//编辑模态框
                    $.post("getfilmbyid" ,{id:$(this).data("row-id")}, function (str) {//造编辑actor的请求路径
                        $("#id-edit").val(str.obj.id);
                        $("#year-edit").val(str.obj.year);
                        $("#name-edit").val(str.obj.name);
                        $("#directors-edit").val(str.obj.directors);
                        $("#writers-edit").val(str.obj.writers);
                        $("#actors-edit").val(str.obj.actors);
                        $("#tags-edit").val(str.obj.tags);
                        $("#areas-edit").val(str.obj.areas);
                        $("#languages-edit").val(str.obj.languages);
                        $("#releaseDates-edit").val(str.obj.releaseDates);
                        $("#duration-edit").val(str.obj.duration);
                        $("#otherNames-edit").val(str.obj.otherNames);
                        $("#imdbUrl-edit").val(str.obj.imdbUrl);
                        $("#star-edit").val(str.obj.star);
                        $("#evaluateNum-edit").val(str.obj.evaluateNum);
                        $("#url-edit").val(str.obj.url);
                    });

            }).end().find(".command-delete").on("click", function(e)//点击删除执行
            {
                var r = confirm("你确定要删除电影 " + $(this).data("row-id") + " 的信息吗?");
                if(r) {
                    $.post("deletefilms", {id: $(this).data("row-id")}, function () {
                        alert("删除成功");
                        $("#grid-data").bootgrid("reload");
                    });
                };
            }).end().find(".command-detail").on("click",function(e){//点击查看影评按钮执行
                gridstr=$(this).data("row-name");

               /* var r= confirm("你确定要查看"+$(this).data("row-id")+"电影影评");
                if(r) {*/
                    $(location).attr('href', 'showfilmcontext?id='+$(this).data("row-id"));

                /*}*/
            }).end().find(".command-context-detail").on("click",function(e){
                var r= confirm("确定要查看"+$(this).data("row-id")+"影评信息");
                if(r){
                    $("#dlg_filmcontext").modal();
                    $.get("getfilmcontextbyid/"+$(this).data("row-id"),function(str){
                        $("#label_film_context").html("豆瓣用户："+str.obj.username);/*val(str.obj.username);*/
                        $("#film_context").val("短评:"+str.obj.context);
                        $("#text_film_context_id").val(str.obj.id);
                    });
                }
            }).end().find(".command-deletecontext").on("click",function (e) {//删除一则电影的评论
                var r =confirm("确定要删除"+$(this).data("row-id")+"影评内容");
                if(r){
                    $.post("deletefilmcontextbyid", {id: $(this).data("row-id")}, function () {
                        alert("删除成功");
                        $("#grid-data").bootgrid("reload");
                    });

                }
            });
        });
    }/*============END OF grid2() ==========*/



    /*点击新增按钮触发*/
    $(document).ready(function() {
        $("#btnAdd").click(function () {
            $("#dlgForm").modal();
        });
    });

/*导出为excel*/
$(document).ready(function () {
    $("#btn_exportfilm").click(function () {
        $.get("exportfilms");
    });
})


    //注册点击搜索按钮的点击事件监听
    $(document).ready(function() {
        /*$("#grid-data").bootgrid("destroy");*///多次调用bootgrid()方法  需要销毁他 然后在进行初始化
        $("#btn_search").click(function () {
            grid2("#grid-data","getCondition",$("#select-condition").val(),$("#keyword").val());
        });
    });

    /*点击 编辑电影中保存的模态框触发*/
    $(document).ready(function () {
       $("#update").click(function () {
           var r= confirm("确定要修改"+$("#name-edit").val()+"电影信息");
           if(r) {
               var json = {
                   "id": $("#id-edit").val(),
                   "year": $("#year-edit").val(),
                   "name": $("#name-edit").val(),
                   "directors": $("#directors-edit").val(),
                   "writers": $("#writers-edit").val(),
                   "actors": $("#actors-edit").val(),
                   "tags": $("#tags-edit").val(),
                   "areas": $("#areas-edit").val(),
                   "languages": $("#languages-edit").val(),
                   "releaseDates": $("#releaseDates-edit").val(),
                   "duration": $("#duration-edit").val(),
                   "otherNames": $("#otherNames-edit").val(),
                   "imdbUrl": $("#imdbUrl-edit").val(),
                   "star": $("#star-edit").val(),
                   "evaluateNum": $("#evaluateNum-edit").val(),
                   "url": $("#url-edit").val()
               };
               $.ajax({
                   url: "updatefilmbyid",
                   type: "POST",/*编辑一个演员*/
                   data: JSON.stringify(json),
                   dataType: 'json',
                   contentType: 'application/json;charset=UTF-8', //contentType很重要
                   success: function (data) {
                       $("#dlg_film-edit").modal('hide');
                       alert("更新成功");
                       location.reload();
                   }
               });
           }
       }) ;
    });

    /*点击模态框中的点赞按钮*/
    $("#btn-filmcontext-like").click(function () {
        $.ajax({
            url:"filmcontexlike",
            type:"POST",
            data:{id:$("#text_film_context_id").val()},
            success:function (data) {
                alert("点赞成功")
            }

        });
    });

    /*点击添加电影的模态框中的保存按钮触发*/
    $("#addfilm").click(function(){
        var json={"year":$("#year").val(),"name":$("#name").val(),"directors":$("#directors").val(),
            "writers":$("#writers").val(),"actors":$("#actors").val(),"tags":$("#tags").val(),
            "areas":$("#areas").val(),"languages":$("#languages").val(),"releaseDates":$("#releaseDates").val(),
            "duration":$("#duration").val(),"otherNames":$("#otherNames").val(),"imdbUrl":$("#imdbUrl").val(),
            "star":$("#star").val(),"evaluateNum":$("#evaluateNum").val(),"url":$("#url").val()};
        $.ajax({
            url:"addfilm",
            type:"POST",/*添加一个演员*/
            data:JSON.stringify(json),
            dataType: 'json',
            contentType:'application/json;charset=UTF-8', //contentType很重要
            success: function(data) {
                $("#dlgForm").modal('hide');
                alert("添加成功");
                location.reload();
            }
        });
    });

</script>

</body>

</html>
